@media screen and (min-width: 750px) {
    html {
        font-size: 75px !important;
    }
}

@media screen and (max-width: 320px) {
    html {
        font-size: 32px !important;
    }
}

body {
    background-color: #f9f9f9;
}

header {
    display: flex;
    width: 10rem;
    height: 5.0419rem;
    background-image: linear-gradient(180deg, #fa4651 0%, #f4804c 100%);
    position: relative;

    span {
        display: block;
        width: 6.6667rem;
        height: 5.81rem;
        position: absolute;
        top: .6885rem;
        left: .7467rem;
        background-image: url(../images/我的/1@2x.png);
    }

    img {
        margin-left: .4rem;
        margin-top: 1.7333rem;
        width: 1.5601rem;
        height: 1.5853rem;
    }

    .i1 {
        margin-left: .2667rem;
        margin-top: 2.04rem;

        p:nth-child(1) {
            color: #ffffff;
            font-size: .4267rem;


        }

        p:nth-child(2) {
            white-space: nowrap;
            color: #ffffff;
            font-size: .2933rem;
            margin-top: .2667rem;

        }
    }

    .i2 {
        position: relative;

        img {

            width: .4267rem;
            height: .4267rem;
            margin-left: .4133rem;
        }

        img:nth-child(1) {
            position: absolute;
            top: -0.5333rem;
            right: -2.9067rem;
        }

        img:nth-child(2) {
            position: absolute;
            top: -0.5333rem;
            right: -3.6rem;
        }

    }

    position: relative;

    .img1 {
        width: 9.1733rem;

        height: 2.1333rem;
        position: absolute;
        top: 2.52rem;
    }

}

main {
    overflow: hidden;
    width: 9.1733rem;
    // background-color: #ffffff;
    margin-top: 2rem;
    border-radius: .2667rem;


    ul:nth-child(1) {
        overflow: hidden;

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 8rem;
        height: 2.6667rem;
        background-color: #ffffff;

        border-radius: .2667rem;

        margin-left: 1rem;

        li {
            margin-top: .8533rem;

            display: flex;
            flex-direction: column;
            align-items: center;

            img {
                width: .64rem;
                height: .64rem;
            }

            span {
                color: #494955;
                font-size: .32rem;
                line-height: .5333rem;
            }
        }

    }

    ul:nth-child(2) {
        margin-top: .2667rem;
        overflow: hidden;

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 8rem;
        height: 2.6667rem;
        background-color: #ffffff;
        // background-color: red;

        border-radius: .2667rem;

        margin-left: 1rem;
        margin-bottom: .6667rem;

        li {
            margin-top: .4533rem;

            display: flex;
            flex-direction: column;
            align-items: center;

            img {
                width: .9333rem;
                height: .9333rem;
            }

            span {
                color: #494955;
                margin-top: .0267rem;
                font-size: .32rem;
            }
        }

    }

    div {


        width: 9.1733rem;
        height: 3.2rem;
        background-color: #ffffff;
        border-radius: .2667rem;
        margin-left: .72rem;

        p {
            color: #202020;
            font-size: .3733rem;
            line-height: .5333rem;
        }

        img {
            width: 8.1333rem;
            height: 1.7867rem;
        }

    }
}

.bottom {
    display: flex;
    justify-content: center;
    align-items: center;


    img {
        width: .5881rem;
        height: .4024rem;
        margin-top: .1733rem;
    }

    span {
        color: #262626;
        font-size: .48rem;
        margin-left: .0667rem;

    }
}

.scrool {
    display: flex;
    overflow-y: scroll;
    margin-top: .4rem;

    &::-webkit-scrollbar {
        display: none;
    }

    span {

        color: #6a6c6b;
        font-size: .3733rem;
        margin-left: .3733rem;
        margin-left: .8267rem;
        white-space: nowrap;
    }

    span:nth-child(1) {
        color: #06121e;
        font-size: .48rem;
        font-weight: 600;


    }
}

.bottom_1 {

    margin-top: .2667rem;
    width: 10rem;
    height: 100%;


    .left {

        width: 4.96rem;

        height: 7.28rem;
        float: left;

        img {
            width: 4.96rem;
            height: 7.28rem;
        }

    }

    .right {
        float: right;
        width: 4.48rem;
        height: 4.48rem;
        border-radius: .2667rem .2667rem 0 0;

        img {
            width: 4.48rem;
            height: 4.48rem;
        }

    }

}

.Home {
    background-color: #ffffff;
    margin: auto;
    width: 10rem;
    height: 1.4133rem;
    left: 50%;
    transform: translateX(-50%);
    //   background-color: red;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;

    div {
        a {
            margin-top: 0.2857rem;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 0.5336rem;
                height: 0.5127rem;
            }

            //   display: block;
        }

        span {
            width: 0.5333rem;
            height: 0.3733rem;

            color: #848484;
            font-size: 0.2667rem;

        }
    }
}